import FilterInput from "@/components/FilterInput"
import FilterItem from "@/components/FilterItem"
import FilterRadio from "@/components/FilterRadio"
import MemberHeader from "@/components/MemberHeader"
import { setFilter } from "@/store/FilterSlice"
import { useState } from "react"
import { useDispatch, useSelector } from "react-redux"
import { useNavigate } from "react-router"

function Filter() {
    const filter = useSelector((state: {
        filter: {
            filterResult: Record<string, any>
        }
    }) => state.filter.filterResult)
    const [result, setResult] = useState(filter)
    const dispatch = useDispatch()
    const navigate = useNavigate()
    const dict = useSelector((state: { dict: { dictInfo: Record<string, Record<string, string | number>[]> } }) => state.dict.dictInfo)

    return (
        <>
            <div className="bg-[#F5F5F5] h-[100%]">
                <div className="bg-[#FFFFFF] pb-[9px]">
                    <MemberHeader
                        title="高级筛选"
                        titleClass="text-[34px] ml-[236px]"
                        navigater={'/member'}
                    />
                    <FilterItem title="性别">
                        <FilterRadio
                            data={dict.dataGender}
                            onChange={(value) => setResult(prev => {
                                return { ...prev, ...{ gender: String(value) } }
                            })}
                            value={result.gender || null} />
                    </FilterItem>
                    <FilterItem title="生日">
                        <FilterInput
                            date={true}
                            value={result.birthday || null}
                            setValue={(value) => setResult(prev => {
                                return {
                                    ...prev, ...{
                                        birthday: value
                                    }
                                }
                            })}
                        />
                    </FilterItem>
                    <FilterItem title="注册来源">
                        <FilterRadio
                            data={dict.dataRegister}
                            value={result.registerFrom || null}
                            onChange={(value) => setResult(prev => {
                                return { ...prev, ...{ registerFrom: String(value) } }
                            })}
                        />
                    </FilterItem>
                    <FilterItem title="注册时间">
                        <FilterInput
                            date={true}
                            value={result.registerTime || null}
                            setValue={(value) => setResult(prev => {
                                return { ...prev, ...{ registerTime: value } }
                            })}
                        />
                    </FilterItem>
                    <FilterItem title="会员状态">
                        <FilterRadio
                            data={dict.memberState}
                            value={result.memberState || null}
                            onChange={(value) => setResult(prev => {
                                return { ...prev, ...{ memberState: String(value) } }
                            })}
                        />
                    </FilterItem>
                    <FilterItem title="累计消费金额">
                        <FilterInput
                            date={false}
                            value={result.consumMoney || null}
                            setValue={(value) => setResult(prev => {
                                console.log(value)
                                return { ...prev, ...{ consumMoney: value } }
                            })}
                        />
                    </FilterItem>
                    <FilterItem title="累计消费次数">
                        <FilterInput
                            date={false}
                            value={result.consumTimes || null}
                            setValue={(value) => setResult(prev => {
                                return { ...prev, ...{ consumTimes: value } }
                            })}
                        />
                    </FilterItem>
                    <FilterItem title="最近消费日期">
                        <FilterInput
                            date={true}
                            value={result.lastConsumDate || null}
                            setValue={(value) => setResult(prev => {
                                return { ...prev, ...{ lastConsumDate: value } }
                            })}
                        />
                    </FilterItem>
                    <FilterItem title="微信状态">
                        <FilterRadio
                            data={dict.wxState}
                            value={result.status || null}
                            onChange={(value) => setResult(prev => {
                                return { ...prev, ...{ status: String(value) } }
                            })}
                        />
                    </FilterItem>
                </div>
                <div className="
                flex 
                h-[88px] 
                w-[100%] 
                fixed 
                bottom-[0] 
                bg-white
                text-[32px]
                text-center
                leading-[88px]
                ">
                    <div
                        className="w-[50%] "
                        onClick={() => {
                            dispatch(setFilter({}))
                            setResult(filter)
                        }}
                    >
                        重置
                    </div>
                    <div
                        className="w-[50%] bg-[#3688FF]"
                        style={{ color: '#fff' }}
                        onClick={() => {
                            dispatch(setFilter(result))
                            navigate('/member')
                        }}
                    >
                        确定
                    </div>
                </div>
            </div>
        </>
    )
}
export default Filter